<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>后台管理 - 易买网</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../scripts/function.js"></script>
	<script type="text/javascript" src="../plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="../scripts/request.js"></script>
	<!-- 后期引入   -->
	<script type="text/javascript" src="../plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="../scripts/request.js"></script>
	<link rel="stylesheet" href="../plugins/element-ui/element-ui.css">
	<style type="text/css">
		.pager > * {
			float: right;
		}

		.clearfix.is-background .el-pager li:not(.disabled).active {
			/*点击背景变成橙色*/
			background-color: #fc7e31;
		}

		.clearfix.is-background .el-pager li:hover {
			/*鼠标经过字变橙色*/
			color: #fc7e31 !important;
		}

		.clearfix.is-background .el-pager li.active {
			/*鼠标经过选中的字是白色*/
			color: white !important;
		}

		.el-select-dropdown__item.selected {
			color: #fc7e31 !important; /* 设置选中条目的背景色 */
		}

		.el-select .el-input.is-focus .el-input__inner {
			border-color: #ddc9b2 !important;
		}

		.el-pagination__sizes .el-input .el-input__inner:hover {
			border-color: #ddc9b2 !important;
		}

		.el-input__inner:focus {
			border-color: #ddc9b2 !important;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="../images/logo.gif"/></div>
		<div class="help"><a href="../index.html">返回前台页面</a></div>
		<div class="navbar">
			<ul class="clearfix">
				<li><a href="index.html">首页</a></li>
				<li><a href="user.html">用户</a></li>
				<li><a href="product.html">商品</a></li>
				<li class="current"><a href="order.html">订单</a></li>
				<li><a href="guestbook.html">留言</a></li>
				<li><a href="news.html">新闻</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="welcome wrap">
			管理员{{ userId }}您好，今天是{{ time }}，欢迎回到管理后台。
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 管理后台
	</div>
	<div id="main" class="wrap">
		<div id="menu-mng" class="lefter">
			<div class="box">
				<dl>
					<dt>用户管理</dt>
					<dd><a href="user.html">用户管理</a></dd>
					<dt>商品信息</dt>
					<dd><em><a href="productClass-add.html">新增</a></em><a href="productClass.html">分类管理</a></dd>
					<dd><em><a href="product-add.html">新增</a></em><a href="product.html">商品管理</a></dd>
					<dt>订单管理</dt>
					<dd><a href="order.html">订单管理</a></dd>
					<dt>留言管理</dt>
					<dd><a href="guestbook.html">留言管理</a></dd>
					<dt>新闻管理</dt>
					<dd><em><a href="news-add.html">新增</a></em><a href="news.html">新闻管理</a></dd>
				</dl>
			</div>
		</div>
		<div class="main">
			<h2 style="cursor: pointer" onclick="window.location.href='index.html'">订单管理</h2>
			<div class="manage">
				<div class="search">
				</div>
				<div class="spacer"></div>
				<form id="orderForm" method="post" action="#">
					订单号：<input type="text" class="text" name="entityId" id="entityId" v-model="page.orderId"/>
					订货人：<input type="text" class="text" name="userName" v-model="page.userId"/>
					<label class="ui-blue"><input type="submit" name="submit" value="查询"  @click.prevent="getPageList"/></label>
				</form>
				<br>
				<table class="list">
					<tbody v-for="item in ordersList" :key="item.id">
					<tr>
						<th colspan="2">单号：{{ item.id }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 时间：{{ item.createTime }}</th>
						<th colspan="3">状态:{{ getStatus(item.status) }}&nbsp
							<el-select name="status" v-model="item.status"
									   placeholder="请选择"
									   @change="(value) => handleSelectChange(value, item.id)"
									   size="mini">
								<el-option :value=0 label="待审核"></el-option>
								<el-option :value=1 label="审核通过"></el-option>
								<el-option :value=2 label="配货"></el-option>
								<el-option :value=3 label="发货"></el-option>
								<el-option :value=4 label="收货确认"></el-option>
							</el-select>
						</th>
					</tr>
					<tr v-for="(item1, index) in item.ordersDetailList">
						<td class="first w4 c">
							<img style="width: 100px; height: 100px" :src=`/common/download?name=${item1.photo}`>
							{{ item1.name }}
						</td>
						<td>总价：{{ item1.price }}</td>
						<td>数量：{{ item1.number }}</td>
						<td class="w1 c" :rowspan="item.ordersDetailList.length" v-if="index === 0">总计：{{ item.totalPrice }}</td>
						<td class="w1 c" :rowspan="item.ordersDetailList.length" v-if="index === 0">
							<a href="#" @click.prevent="delOrders(item.id)">删除</a>
						</td>
					</tr>
					</tbody>
				</table>
				<div class="pager">
					<el-pagination
							class="clearfix"
							background
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:page-sizes="[2, 5, 10, 15]"
							layout="sizes, prev, pager, next, jumper"
							:current-page="page.currentPage"
							:page-size="page.pageSize"
							:total="page.total">
					</el-pagination>
					<br>
				</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
	</div>
</div>


<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../api/common.js"></script>
<script type="text/javascript" src="../api/product.js"></script>
<script type="text/javascript" src="../api/orders.js"></script>
<script type="text/javascript" src="../plugins/element-ui/element-ui.js"></script>
<script type="text/javascript">
	axios.get("/user/getStatus")
	const app = new Vue({
		el: '#app',
		data: {
			loading: false,
			userId: getUserInfo().userId,
			time: getFormattedDate(),
			ordersList: [],
			page: {
				currentPage: 1,
				pageSize: 5,
				total: 100,
				orderId: '',
				userId: '',
			},
		},
		async mounted() {
			await this.getPageList()
		},
		methods: {
			async getPageList() {
				this.loading = true
				const list = await ordersPageApi(this.page.currentPage, this.page.pageSize,
						this.page.orderId, this.page.userId);

				//console.log(list)
				this.page.total = list.data.total

				this.ordersList = list.data.records

				for (const order of this.ordersList) {
					for (const detail of order.ordersDetailList) {
						const resp = await getProductNameByIdApi(detail.productId);
						const resp1 = await getProductPhotoByIdApi(detail.productId);
						Vue.set(detail, 'name', resp.data);
						Vue.set(detail, 'photo', resp1.data);
					}
				}
				console.log(this.ordersList)
				this.loading = false
			},
			async handleCurrentChange(page) {
				this.page.currentPage = page;
				await this.getPageList();
			},
			async handleSizeChange(size) {
				this.page.pageSize = size;
				await this.getPageList();
			},
			async handleSelectChange(value, id) {
				if (confirm('确定执行操作吗？')) {
					const resp = await setStatusApi(id, value)
					if (resp.code === 1) {
						this.$message({
							message: resp.data,
							type: 'success'
						});
					}
					await this.getPageList()
				}

			},
			async delOrders(id) {
				const resp = await delOrdersApi(id)
				if (resp.code === 1) {
					this.$message({
						message: resp.data,
						type: 'success'
					});
					await this.getPageList()
				}else if (resp.code === 0) {
					this.$message.error(resp.msg)
				}else {
					this.$message.error("删除失败")
				}
			}
		},
		computed: {
			getStatus() {
				const statusMap = {
					0: '待审核',
					1: '审核通过',
					2: '配货',
					3: '发货',
					4: '收货确认'
				};
				return num => statusMap[num] || '未知状态';
			}
		}
	})
</script>
</body>
</html>
